<template>
    <div class="record" v-title data-title="填报记录">
        <headerTop title="填报记录"></headerTop>
        <div class="record-tab" style="margin-bottom: 5px">
            <van-tabs v-model="tabActive" color="#007CF9" line-width="50" @click="switchTab" swipeable animated>
                <van-tab title="文书"></van-tab>
                <van-tab title="会计"></van-tab>
                <van-tab title="基建"></van-tab>
                <van-tab title="特种载体"></van-tab>
                <van-tab title="工程"></van-tab>
                <van-tab title="业务"></van-tab>
                <van-tab title="人事"></van-tab>
            </van-tabs>
        </div>

        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad">

            <div  class="record-content" v-for="(item,index) in list" :key="index" @click="goDetail(item.id,item.reportType)">
                <span class="record-title">{{item.projectName}}</span>
                <div class="record-time">
                    <span style="width: 150px">{{"编号："+item.projectNum}}</span>
                    <span style="margin-left: 30px">{{"日期："+item.reportDate}}</span>
                </div>
            </div>
        </van-list>
    </div>
</template>

<script>
    import headerTop from "@/components/headerTop";
    import {dismissLoading, showLoading} from "@/utils/notify";
    export default {
        name: "record",
        components:{
            headerTop
        },
        data(){
            return{
                tabActive:0,
                loading: false,
                finished: false,
                allPage: 0,
                pageSize: 20,
                pageNum: 0,
                currentType:'book',
                list:[],
                error: false,
                isRefrsh:false
            }
        },
        methods:{
            goDetail(id,reportType){
                if (reportType=='book' || reportType=='special'){
                    this.$router.push({
                        name:'officeFillRecord',
                        query:{
                            projectId:id,
                            projectType:reportType
                        }
                    })
                }else if (reportType=='hr'){
                    this.$router.push({
                        name:'personFillRecord',
                        query:{
                            projectId:id,
                            projectType:reportType
                        }
                    })
                }else if (reportType=='account' || reportType=='capital' || reportType=='project' || reportType=='business'){
                    this.$router.push({
                        name:'projectFillRecord',
                        query:{
                            projectId:id,
                            projectType:reportType
                        }
                    })
                }
            },
            switchTab(e){
                this.pageNum=1
                this.list=[]
                this.finished = false;
                this.isRefrsh=true
                if (e==0){
                    this.currentType='book'
                }else if (e==1){
                    this.currentType='account'
                }else if (e==2){
                    this.currentType='capital'
                }else if (e==3){
                    this.currentType='special'
                }else if (e==4){
                    this.currentType='project'
                }else if (e==5){
                    this.currentType='business'
                }else if (e==6){
                    this.currentType='hr'
                }
                this.getRecordList()
            },
            onLoad() {
                if (!this.isRefrsh){
                    this.pageNum++;
                    this.getRecordList()
                }
                this.isRefrsh=false
            },
            getRecordList(){
                showLoading("获取中...")
                let params = {
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    type:this.currentType
                }
                let callBack = (res) => {
                    this.error=false
                    this.allPage = res.paginator.pages
                    res.list.forEach((item) => {
                        this.list.push(item)
                    })
                    this.loading = false;

                    if (this.pageNum >= this.allPage) {
                        this.finished = true;
                    }
                    this.isRefrsh=false
                    dismissLoading()
                }
                let errback=()=>{
                    this.loading = false;
                    this.error=true
                    this.pageNum=this.pageNum-1
                    dismissLoading()
                }
                this.$request('POST', "/api/mobile/report/list", params, callBack,this,errback)
            }
        },
        created() {
            if (this.$route.query.tabActive){
                this.tabActive=parseInt(this.$route.query.tabActive)
                if (this.tabActive==0){
                    this.currentType='book'
                }else if (this.tabActive==1){
                    this.currentType='account'
                }else if (this.tabActive==2){
                    this.currentType='capital'
                }else if (this.tabActive==3){
                    this.currentType='special'
                }else if (this.tabActive==4){
                    this.currentType='project'
                }else if (this.tabActive==5){
                    this.currentType='business'
                }else if (this.tabActive==6){
                    this.currentType='hr'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .record{
        min-height: 100vh;
        background: $page-bg;
        padding-top: 112px;
        box-sizing: border-box;

        .record-tab{
            width: 100%;
            background: white;
            position: fixed;
            top: $header-top;
            left: 0;

        }
        .record-content{
            background: white;
            padding: 14px 12px;
            margin-bottom: 5px;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            .record-title{
                font-size: 16px;
                color: #323233;
            }
            .record-time{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-top: 10px;
                font-size: 13px;
                color: #969799;
            }

        }
    }
</style>